<template>
    <van-button
      v-if="!isFollowed"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      @click="onClick"
      :loading="loading"
      >关注</van-button>
    <van-button
      v-else
      class="follow-btn"
      round
      size="small"
      @click="onClick"
      :loading="loading"
    >已关注</van-button>
</template>

<script>
export default {
  name: 'FollowUser',
  props: {
    userId: {
      type: String,
      required: true
    },
    // 这个是否已关注，为什么要从外界传过来，因为在组件内部无法根据 userId 来确定是否关注过这个用户
    isFollowed: {
      type: Boolean,
      default: false // 默认未关注
    }
  },
  model: {
    prop: 'isFollowed',
    // 事件名称长这样，即支持 v-model 也支持 .sync 修饰符
    event: 'update:isFollowed'
  },
  data () {
    return {
      loading: false // 加载中
    }
  },
  methods: {
    async onClick () {
      this.loading = true
      // 模拟延迟 3s 后完成
      // await new Promise(resolve => setTimeout(resolve, 3000))
      try {
        if (this.isFollowed) {
          // 已关注，需要去取消关注
          await this.apis.user.deleteFollow(this.userId)
        } else {
          // 未关注，需要去关注
          await this.apis.user.addFollow(this.userId)
        }
      } finally {
        this.loading = false
      }
      // 能够走到这里来，说明请求已经成功了
      this.$emit('update:isFollowed', !this.isFollowed)
    }
  }
}
</script>

<style>

</style>
